<template>
  <div style="width: 100%">
    <el-input
        ref="input"
        v-model="money"
        clearable
        v-bind="$attrs"
        @blur="blur"
        v-on="handleEvents"
        :size="size"
    ></el-input>
  </div>
</template>

<script>
export default {
  components: {},
  props: {
    value: {
      required: false,
    },

    min: {
      required: false,
      type: Number,
    },
    max: {
      required: false,
      type: Number,
    },
    size: {
      required: false,
      type: String,
    },
    handleEvents: {
      required: false,
      type: Object,
    },
  },
  data() {
    return {
      // money: 0,
      symbolNum: 0,
    };
  },
  provide() {
    return {};
  },
  computed: {
    money: {
      get() {
        if (typeof this.value == "string" && this.value) {
          this.$emit(
              "input",
              isNaN(Number(this.value))
                  ? undefined
                  : Number(this.value)
          );
          return undefined;
        }
        let value = this._.cloneDeep(this.value?.toString()?.trim?.());

        if (value === undefined || value === null || value === "") {
          return undefined;
        }

        if (value.at(-1) == ".") {
          return value;
        }

        let price = Number(value);
        let fixed2 = Number(price.toFixed(2));
        let price_thousand = new Intl.NumberFormat("en-us").format(
            fixed2
        );

        let input = this.$refs.input?.$refs?.input;
        const symbolNum = price_thousand.match(/\,/g)?.length ?? 0;
        if (input) {
          let position = input.selectionStart;

          let diff = symbolNum - this.symbolNum;
          this.symbolNum = symbolNum;
          // console.log(position);
          this.$nextTick(() => {
            input.setSelectionRange(
                position + diff,
                position + diff
            );
          });
        }
        return price_thousand;
      },
      set(val) {
        let value = this._.cloneDeep(val)?.toString();
        if (value === undefined || value === null || value === "") {
          this.$emit("input", value);
          return;
        }
        if (value.at(-1) == ".") {
          this.$emit("input", value);
          return;
        }
        let [integer, decimals] = value.split(".");

        let integerNum = integer?.match(/\d/g)?.join();
        let decimalsNum = decimals?.match(/\d/g)?.join();
        let num;
        if (decimalsNum) {
          num = `${integerNum}.${decimalsNum}`;
        } else {
          num = `${integerNum}`;
        }
        num = num.replace(/\,/g, "");
        if (this.value !== value) {
          this.$emit("change", value);
        }
        this.$emit("input", isNaN(num) ? 0 : Number(num));
      },
    },
  },
  beforeDestroy() {},
  mounted() {},
  methods: {
    blur() {
      if (
          this.money !== null &&
          this.money !== undefined &&
          this.money !== ""
      ) {
        let money = this.money.replace(/\,/g, "");
        if (money > this.max) {
          this.money = this.max * 1;
        }
        if (money < this.min) {
          this.money = this.min * 1;
        }
      }
      if (this?.handleEvents?.on?.blur) {
        this?.handleEvents?.on?.blur?.();
      }
    },
  },
};
</script>

<style></style>
